<template>
	<view class="cancel_account">
		<view>请您务必仔细阅读、充分理解协议中相关条款内容。</view>
		<view>我们善意地提醒您，注销账户会影响您的正常体验，且注销账户后，您的个人信息我们将在系统中去除，请您知晓并理解。</view>
		<view>1.账户一旦被注销将不可恢复，请您提前务必保存好相关订单商品和服务凭证等资料，否则您将无法享受售后服务。</view>
		<view>2.注销账户后，您将无法再使用本账户，也无法找回您账户中及与账户中相关的任何内容或信息，包括但不限于：</view>
		<view>（1）您将无法使用本账户。</view>
		<view>（2）本账户的个人资料和历史信息（包括但不限于用户名、头像、购买记录等）都将无法找回。</view>
		<view>（3）本账户所有已记录的关联账号信息（包括但不限于微信、手机号码等）都将无法找回。</view>
		
		<view> 如您已仔细阅读上述【注销须知】后，仍执意注销您的账户，请点击我已阅读以上内容并同意注销账号操作。</view>
		<view class="agreement">
			<image class="checkbox-icon" :src="
					isAgree
						? 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-13.png'
						: 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-12.png'
				" @click="isAgree = !isAgree" />
			<text class="agreement-text">
				我已阅读并同意《账号注销须知》
			</text>
		</view>
		<view @click="cancelAccount" class="cancel-btn xjs-btn-primary" :class="{'xjs-btn-disabled':!isAgree}">账号注销</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch, reactive } from 'vue';
	import { logOut }from '@/hooks/useLogin'
	const isAgree = ref(false);
	const cancelAccount = ()=>{
		if (!isAgree.value) {
			uni.showToast({
				title: '请阅读并同意账号注销须知',
				icon: 'none'
			});
			return;
		}
		uni.showModal({
			title: '温馨提醒',
			content: '账号注销后将无法恢复您的相关信息及您所享受的权益！！！',
			confirmText: '确认注销',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						icon:'none',
						title:'注销成功',
						duration:1500,
						success: () => {
							logOut()
						}
					})
				} else if (res.cancel) {
					
				}
			}
		});
		
	}
</script>

<style lang="scss" scoped>
	.cancel_account {
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100vh;

		view {
			color: #666;
			font-size: 28rpx;
			margin-bottom: 32rpx;
			text-indent: 1rem;
		}
		.agreement {
			display: flex;
			align-items: center;
			margin: 80rpx 0;
		
			.checkbox-icon {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}
		
			.agreement-text {
				font-size: 24rpx;
				color: #666;
				margin-left: 16rpx;
			}
		}
		.cancel-btn{
			color: #fff;
		}
	}
</style>